import React, { Component } from 'react'
import { Form, Select, Input, Space, Button, Cascader, Modal } from 'antd'
import TheUpload from '@/components/TheUpload'
import { apiGetGoodsClassifyList, apiGetGoodsClassifyTree, apiCheckBrandInfo } from '@/request/mallManagement'
const { TextArea } = Input;

export default class Brand extends Component {
  state = {
    isModalOpen: false,
    options: [],
    loading: false,
    confirmLoading: false,
    addData: [],
    Msg: ''
  }
  componentDidMount() {
    this.getOptions()
  }
  getOptions = async () => {
    let res = await apiGetGoodsClassifyTree()
    if (res.data && res.code === 0) {
      let options = res.data.map(v => {
        return {
          value: v.value,
          label: v.label,
          children: v.children.length > 0 ? v.children : []
        }
      })
      this.setState({ options })
    }
  }
  getApplyFileResult = (file) => {
    if (file.length && file[0].response && file[0].response.code === 0) {
      let url = file[0].response.data
      this.applyRef.setFieldsValue({ brandImg: url })
    } else {
      this.applyRef.setFieldsValue({ brandImg: '' })
    }
  }
  dialogSave = async (value) => {
    const { type, editValue } = this.state
    this.setState({
      addData: value
    })
    console.log(value, 'value');
    let item = await apiCheckBrandInfo({ ...value })
    if (item.data.code === 0) {
      this.BrandinfoAd(value)
    } else if (item.data.code === 1000) {
      this.setState({
        isModalOpen: true,
        Msg: item.data.codeMessage
      })
    } else if (item.data.code === 5000) {
      Modal.warning({
        content: item.data.codeMessage,
      });
    }
  }
  BrandinfoAd = value => {
    this.setState({
      confirmLoading: true
    })
    this.props.onFinish(value)
  }
  closeApplyDialog = () => {
    this.props.handleCancel()
  }
  hideModal = () => {
    this.setState({
      isModalOpen: false
    })
  }
  render() {
    const { options, loading, isModalOpen, addData, Msg, confirmLoading } = this.state
    return (
      <Form ref={ref => this.applyRef = ref} onFinish={this.dialogSave} initialValues={{ brandDetail: '' }}>
        {/* <Form.Item label="所属类目" name="brandClassifyId" rules={[{ required: true }]}>
          <Cascader options={options} width={200} changeOnSelect placeholder="请选择商品类目" />
        </Form.Item> */}
        <Form.Item label="品牌名称" name="brandName" rules={[{ required: true }]}>
          <Input maxLength={20} />
        </Form.Item>
        <Form.Item label="品牌图片" name="brandImg" rules={[{ required: true }]}>
          <TheUpload len={1} getFileResult={this.getApplyFileResult} />
        </Form.Item>
        <Form.Item
          label="品牌介绍"
          name="brandDetail">
          <TextArea
            showCount
            maxLength={100}
            style={{
              height: 120,
              resize: 'none',
            }}
            placeholder="请输入品牌介绍"
          />
        </Form.Item>

        <Form.Item>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
            <Space>
              <Button onClick={this.closeApplyDialog}>取消</Button>
              <Button type="primary" htmlType="submit" loading={loading}>确认</Button>
            </Space>
          </div>
        </Form.Item>
        <Modal visible={isModalOpen} onOk={() => this.BrandinfoAd(addData)} closable={false} confirmLoading={confirmLoading} onCancel={this.hideModal}>
          <p>{Msg}</p>
        </Modal>
      </Form>
    )
  }
}
